<template>
  <div>
    <!-- 关系树子页面 -->
    <div  style="
          height: 410px;
          overflow: auto;
          overflow-x: hidden;
          margin-bottom: 20px;
        ">
        <!-- check-strictly -->
    <vp-tree
      :vp-header="{show:true,text:'已构建关系树',search:true,name:'dictItemName'}"
      vp-title=""
      :filter-node-method="filterNode"
      :data="treeData"
      :props="defaultProps"
      @node-click="handleNodeClick"
      @check="handleNodeClick"
      show-checkbox
      check-strictly
      highlight-current
      ref="configTree"
      node-key="dictItemCode"
      :expand-on-click-node="false"
      check-on-click-node
      treeMaxHeight="320px"
    ></vp-tree>
    </div>
    <!--  -->
     <div style="display:flex;justify-content:center;margin-top:20px;margin-bottom:16px;" v-if="mulSelect">
        <el-button @click="confirmData">确认</el-button>
        <el-button @click="cancel">取消</el-button>
      </div>

    <!--  -->
  </div>
</template>
<script>
import { listToTree } from "@/lib/util"; // list转tree
import vpTree from "@/components/vpTree";
import { ruleDefinition,publicManage_pub } from "@/api/index";
export default {
  name: "relationTree",
  components: {
    vpTree
  },
  props: {
    dictCode: {
      type: String,
      default: ""
    },
    indexItems: {
      type: Number,
      default: 0
    },
      //选中的值
    itemData:{
      type:Array,                                      
      default:()=>[],
    },
    mulSelect: {
      type: Boolean,
      default: false
    }
  },
  created() {
    this.init();
  },

  data() {
    return {
      treeData: [],
      defaultProps: {
        children: "children",
        label: "dictItemName",
        value:"dictItemCode",
      },
      selectData:[], // 勾选的数据
    };
  },
  watch:{
    dictCode(){
    this.init();
    }
  },
  methods: {
    init() {
      let params = {
        dictCode: this.dictCode, // 维度编码
        selectData: "", // 规则编码，
        selectionFlag: "1" // 维度筛选code
      };
      console.log(params,"掉到这个页面了吗？？？==============")
      publicManage_pub
        .dimTreenodeQueryTreeNodeTree(params)
        .then(res => {
          if (res.code == 200) {
            this.treeData = listToTree("dictItemCode", "parentItemCode", res.data);
            console.log(this.treeData,'this.treeData')
            if(this.mulSelect){
              for(let i = 0 ;i <this.treeData.length;i++){
                 this.treeData[i].disabled = true
              }
            }
            //设置集合  接受选中的节点
            // let selectnodes = [];
            // for (let i = 0; i < res.datas.size; i++) {
            //   if (res.datas[i].checked) {
            //     selectnodes.push(res.datas[i])  
            //   }
            // }
            //  this.$refs.configTree.$tree.setCheckedKeys(selectnodes);
            let selectnodes = this.itemData;
            this.$refs.configTree.setCheckedKeys(selectnodes);
            this.$forceUpdate()
          } else{
            this.$message.error(res.message);
          }
        })
        .catch(res => {
          console.log(res);
        });
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    // handleCheckChange(){
    //   // if(this.mulSelect){
    //   //     this.selectData = this.$refs.tree.getCheckedNodes();
    //   //     console.log(this.selectData,'this.selectData')

    //   // }
    // },
    handleNodeClick(obj) {
    // 1221
    // 多选处理
      if(this.mulSelect){
         if(this.mulSelect){
          //  for(let i = 0 ;i <this.treeData.length;i++){
          //        this.treeData[i].disabled = true
          //     }
          this.selectData = this.$refs.configTree.$tree.getCheckedNodes();
          // 删除disabled为true的数据
          if(this.selectData.length){
            for(let i = 0; i<this.selectData.length;i++){
              if(this.selectData[i].disabled){
                this.selectData.splice(this.selectData[i],1)
              }
            }
          }
          console.log(this.selectData,'this.selectData')
      }
      }
      // 单选处理
      if(!this.mulSelect){
      let _self = this
      let node = { ...obj };
      this.$refs.configTree.$tree.setCheckedNodes([]);
      this.$refs.configTree.$tree.setCheckedNodes([node]);
        this.$confirm("您确认要选择这条数据吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let params = {
            row: obj,
            selectionFlag: "1", // 层级
            index: this.indexItems
          };
          this.$emit("selectDataFunc", params);
        })
        .catch(() => {
          this.$refs.configTree.$tree.setCheckedNodes([]);
          this.$message({
            type: "info",
            message: "已取消选择"
          });
        });
      }
      // this.$confirm("您确认要选择这条数据吗？", "提示", {
      //   confirmButtonText: "确定",
      //   cancelButtonText: "取消",
      //   type: "warning"
      // })
      //   .then(() => {
      //     let params = {
      //       row: obj,
      //       selectionFlag: "1", // 层级
      //       index: this.indexItems
      //     };
      //     this.$emit("selectDataFunc", params);
      //   })
      //   .catch(() => {
      //     this.$refs.configTree.$tree.setCheckedNodes([]);
      //     this.$message({
      //       type: "info",
      //       message: "已取消选择"
      //     });
      //   });
    },
    // 确定
    confirmData(){
      // 多选的确定
      if(!this.selectData.length > 0){
        this.$message.warning("请选择数据")
        return
      }
      let params = {
        row: this.selectData,
        selectionFlag: "1", // 层级
        index: this.indexItems
      }
     this.$emit("selectDataFunc", params);
    },
    // 取消
    cancel(){
        this.$refs.configTree.$tree.setCheckedNodes([]);
          this.$message({
            type: "info",
            message: "已取消选择"
          });
        this.$emit("selectDataFunc", "");

    }
  }
};
</script>
<style lang="scss" scoped>
.tree_box{
  max-height: 270px;
}
</style>